<template>
    <div>
        <el-autocomplete v-model="hosname" class="form" placeholder="请输入医院名称" clearable :fetch-suggestions="fetchData"
            @select="goDetail" :trigger-on-focus="false"></el-autocomplete>
        <el-button :icon="Search" type="primary" size="large" @click="">搜索</el-button>
    </div>
</template>

<script setup lang="ts">
import { getHospitalByHosnameAPI } from '@/api/home';
import { HosptialInfo } from '@/api/home/type';
import { Search } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let hosname = ref<string>('')

const fetchData = async (keyword: string, cb: any) => {
    const res: HosptialInfo = await getHospitalByHosnameAPI(keyword)
    let searchArr = res.data.map(item => {
        return {
            value: item.hosname,
            hoscode: item.hoscode
        }
    })
    cb(searchArr)
}
let $router = useRouter()
const goDetail = (item: any) => {
    $router.push(`/hospital?hoscode=${item.hoscode}`)
}
</script>

<style scoped lang="scss">
div {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;

    ::v-deep .form {
        width: 40%;
        margin-right: 10px;
    }

    ::v-deep .el-input__inner {
        height: 45px;
        font-size: 16px;
        color: #333;
    }
}
</style>